<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{common/header :: header}">
    <title>管理平台</title>
</head>
<body>
<div class="layui-container">
    <div class="">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">

            <form class="layui-form" action="" lay-filter="add-from">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="roleName" lay-verify="required" autocomplete="off" placeholder="请输入角色名称"
                               class="layui-input" onkeyup="this.value=this.value.replace(/^\\s+|\\s+$/g,'')">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">角色代码:</label>
                    <div class="layui-input-block">
                        <input type="password" name="roleCode" lay-verify="required" autocomplete="off" placeholder="请输入密码角色代码如：ROLE_ADMIN"
                               class="layui-input" onkeyup="this.value=this.value.replace(/^\\s+|\\s+$/g,'')">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <a class="layui-btn" lay-submit="" lay-filter="addRole">添加</a>
                        <button class="layui-btn" type="reset">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>
<script src="/static/layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script src="/static/jquery/jquery-3.2.1.min.js" th:src="@{/jquery/jquery-3.2.1.min.js}" charset="utf-8"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
    let index = parent.layer.getFrameIndex(window.name);
    layui.use(['form','layer'], function () {
        let form = layui.form,
            layer = layui.layer;

        //自定义验证规则
        form.verify({
            mobile: function(value){
                if((!/^[1-9]+[0-9]*]*$/.test(value))){
                    return '手机号必须是数字';
                }
                if(value.length !== 11){
                    return '手机号必须11位';
                }

            }
        });

        //监听提交
        form.on('submit(addRole)', function(data){
            let load = layer.load(0, {shade: false});
            $.ajax({
                type: 'POST',
                contentType: 'application/x-www-form-urlencoded',
                url: "/admin/addRole",
                data: data.field,
                success: function(result){
                    layer.close(load);
                    if(result.code === 1){
                        layer.msg('添加成功', {icon: 1,time: 1200});
                        parent.layer.close(index);//关闭当前页
                    }else {
                        layer.msg(result.message, {icon: 2,time: 1200});
                    }
                },
                error : function(e){
                    layer.msg('网络错误', {icon: 2});
                }
            });
            return false;
        });

    });
    /*]]>*/
</script>
</body>
</html>
